/**
 * Created by 86185 in 2020/8/28 on 21:58
 */
import React from "react"

import "@/components/PlaceFeedback/PlaceFeedback.component.styl"

import Radar from "@/components/common/Radar/Radar.component"
import BubbleChart from "@/components/common/BubbleChart/BubbleChart.component"

class PlaceFeedback extends React.Component {
    constructor(props) {
        super(props);
        // 统一绑定自定义方法
        this.handleToggleGraph = this.handleToggleGraph.bind(this);
        this.handleToggleBtn = this.handleToggleBtn.bind(this);
        // 将所有变量统一放在state中，便于管理
        this.state = {
            showLD: true,
            cloudActive: 0,
            cloudOptions: ["总览", "安全类投诉", "环境类投诉", "交通类投诉"],
            cloudSourceList: [
                [
                    {name: "预约失败", count: 10},
                    {name: "门票定价不合理", count: 8},
                    {name: "垃圾无人清理", count: 15},
                    {name: "强制消费", count: 6},
                    {name: "交通混乱", count: 4}
                ],
                [
                    {name: "步梯设施老旧", count: 10},
                    {name: "没有护栏", count: 8},
                    {name: "垃圾无人清理", count: 15},
                    {name: "游客中心设施陈旧", count: 6},
                    {name: "道路不平整", count: 4}
                ],
                [
                    {name: "乱堆乱放杂物", count: 10},
                    {name: "环境卫生差", count: 8},
                    {name: "垃圾无人清理", count: 15},
                    {name: "厕所没有水", count: 6},
                    {name: "吃出苍蝇", count: 4}
                ],
                [
                    {name: "没有接驳车", count: 10},
                    {name: "交通不方便", count: 8},
                    {name: "停车场都没位置", count: 15},
                    {name: "停车时间长", count: 6},
                    {name: "停不了车", count: 4}
                ]
            ],
            radarData: {
                id: "place-feedback",
                indicator: [
                    {
                        name: "人员服务类投诉", max: 6500, lineBreak: false,
                        axisLabel: {
                            show: true,
                            fontSize: 12,
                            showMaxLabel: false,
                            showMinLabel: true,
                            formatter: function (value) {
                                return value.toString();
                            }
                        }
                    },
                    {name: "景区门票类投诉", max: 16000, lineBreak: true},
                    {name: "景区环境类投诉", max: 30000, lineBreak: false},
                    {name: "景区交通类投诉", max: 38000, lineBreak: false},
                    {name: "景区安全类投诉", max: 52000, lineBreak: true},
                ],
                seriesData: [
                    {
                        value: [5000, 14000, 28000, 31000, 42000],
                        name: "全省旅游景区投诉分析"
                    }
                ]
            },
            bubbleData: {
                id: "place-feedback",
                dataList: []
            }
        };
    }

    handleToggleGraph() {
        this.setState({showLD: !this.state.showLD});
    }

    handleToggleBtn(event) {
        const {cloudSourceList, bubbleData} = this.state;
        let index = parseInt(event.currentTarget.getAttribute("data-index"));
        this.setState({
            cloudActive: index,
            bubbleData: _.assign(bubbleData, {dataList: cloudSourceList[index]})
        });
        // 重新渲染云图组件
        this.refs.bubbleRef.initChart();
    }

    UNSAFE_componentWillMount() {
        const {cloudActive, cloudSourceList, bubbleData} = this.state;

        this.setState({
            bubbleData: _.assign(bubbleData, {dataList: cloudSourceList[cloudActive]})
        });
    }

    render() {
        const {showLD, cloudOptions, cloudActive} = this.state;

        const btnItems = _.map(cloudOptions, (item, index) => {
            return <span className={`btn${index === cloudActive ? " active" : ""}`} key={index}
                         onClick={this.handleToggleBtn} data-index={index}>{item}</span>
        });

        let chart = null;
        if (showLD) {
            chart = <div className="ld-chart">
                <Radar radarData={this.state.radarData}></Radar>
            </div>
        } else {
            chart = <div className="cloud-chart">
                <div className="btn-group">
                    {btnItems}
                </div>
                <div className="cloud">
                    <BubbleChart ref="bubbleRef" bubbleData={this.state.bubbleData}></BubbleChart>
                </div>
                <div className="desc">
                    <div className="name">实时热评</div>
                    <div className="text-area">
                        这里是实时热评的详细内容
                    </div>
                </div>
            </div>
        }

        return (
            <div className="place-feedback">
                <div className="icon">
                    <i className="icon-1 fa fa-chevron-up"></i>
                    <i className="icon-2 fa fa-chevron-up"></i>
                    <i className="icon-3 fa fa-chevron-up"></i>
                    <i className="icon-4 fa fa-chevron-up"></i>
                </div>
                <div className="title">
                    <i className="left-icon fa fa-angle-right">
                        <i className="fa fa-angle-right"></i>
                    </i>
                    <span className="text">全省旅游景区投诉分析</span>
                    <i className="right-icon fa fa-angle-left">
                        <i className="fa fa-angle-left"></i>
                    </i>
                    <i className="refresh" onClick={this.handleToggleGraph}></i>
                </div>
                <div className="chart">
                    {chart}
                </div>
            </div>
        )
    }
}

export default PlaceFeedback
